<template>
	<view>
		<u-row>
			<u-col span='6'>
				<view>
					<view v-if='current == 0' class='active'>
						未领取
					</view>
					<view v-else class='no-active' @click='changeCurrent(0)'>
						未领取
					</view>
				</view>
			</u-col>
			<u-col span='6'>
				<view>
					<view v-if='current == 1' class='active'>
						已领取
					</view>
					<view v-else class='no-active' @click='changeCurrent(1)'>
						已领取
					</view>
				</view>
			</u-col>
		</u-row>
		<view v-if='logs && logs.length > 0'>
			<view v-for='item in logs'>
				<view class='list'>
					<u-row @click='updateLog(item)'>
						<u-col span='10'>
							<view class='award'>奖品：{{item.award.__metadata.name}}(ID:MY{{item.id}})</view>
							<view class='title'>活动：{{item.activity.__toString}}</view>
							<view class='date'>中奖日期：{{$u.timeFormat(new Date(item.date), 'yyyy年mm月dd日')}}</view>
						</u-col>
						<u-col span='2'>
							<view>
								<img :src='item.award.__metadata.picture' style='width:60px;height:60px;' />
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view v-else style='padding-top:30vh'>
			<u-empty mode="history" text='暂无中奖记录'>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logs: [],
				current: 0
			}
		},
		onLoad() {
			this.getRecord()
		},
		methods: {
			changeCurrent(e){
				this.current = e
				this.getRecord()
			},
			getRecord(){
				let filter = `entity.getAward() && entity.getStatus() == ${this.current+1}`
				this.request.get(`api/lottery-records`,{
					'@filter': filter,
					'@expands': "['entity.award']"
				}).then((res) => {
					console.log(res.data)
					this.logs = res.data
				})
			},
			updateLog(log){
				console.log(log)
				if(log.status == 1){
					uni.showModal({
						title: '',
						content: '是否确定已经领取了奖品？',
						success: (data) => {
							if(data.confirm){
								this.request.put(`api/lottery-records/${log.id}`,{status: 2}).then((res) => {
									this.getRecord()
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	.list{
		padding:10px;
		margin: 5px;
		background-color: #f3f3f3;
		border-radius: 5px;
	}
	.award{
		color: #303133;
		font-weight: bold;
	}
	
	.title{
		color:#606266;
	}
	
	.date{
		color: #909399;
		font-size: 14px;
	}
	
	.active{
		background-color: #002238;
		color: #FFF;
		text-align: center;
		padding: 5px 0px;
		border: solid #002238 1px;
	}
	.no-active{
		background-color: #f3f3f3;
		color: #002238;
		text-align: center;
		padding: 5px 0px;
		border: solid #002238 1px;
	}
</style>